<template>
  <v-chart class="chart" :option="option" autoresize />
</template>

<script setup>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';


use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);
import {reactive, ref, toRefs} from 'vue'
import { onMounted } from 'vue';


const loading = ref(false);
import { getCashier } from '../api/shop/cashier.js'; // 导入 selectData 函数



const serviceData = reactive({
Data: []
});
const shop=ref({
  shopId:4
})
const option = ref({
  title: {
    text: '店铺流水',
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: [],
  },
  series: [
    {
      name: '流水',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
});

async function fetchOverviewData() {
  loading.value = true;
  const shopId = 4; // 这里可以根据需要动态设置 shopId
  try {
    const data = await getCashier({ shopId }); // 调用 API 获取数据

    const { appointedNum, orderNum, } = data.data;

    option.value.series[0].data = [
      { value: data.data.appointedNum, name: '线上预约单' },
      { value: data.data.appointedNum, name: '线下预约单' },
      { value: data.data.orderNum, name: '线上订单' },
      { value: data.data.orderNum, name: '线下订单' },
      { value: data.data.orderNum, name: '总单' }, // 总单的数量
    ];

    // 更新图例
    option.value.legend.data = [
      '线上预约单',
      '线下预约单',
      '线上订单',
      '线下订单',
      '总单',
    ];
  } catch (error) {
    console.error('获取收银数据失败:', error);
    alert('获取收银数据失败，请重试');
  } finally {
    loading.value = false;
  }
}

// 在组件挂载时调用 fetchOverviewData
onMounted(() => {
  fetchOverviewData();
});
</script>

<style scoped>
.chart {
  height: 100vh;
}
</style>
